<template>
  <div class="find-car page_pos_style page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <!-- <van-nav-bar title="寻车记录" fixed placeholder :border="false">
      <template #left>
        <van-icon name="arrow-left" size="18" @click="goback()" />
      </template>
      <template #right>
        <img
          src="../../assets/image/icon_search.png"
          @click="onClickRight()"
          v-show="isActive"
        />
      </template>
    </van-nav-bar> -->
    <!-- <div class="search_box">
      <img
          src="../../assets/image/icon_search.png"
          @click="onClickRight()"
          v-show="isActive"
        />
    </div> -->
    
    <navbar :title="title"></navbar>
      <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">
      <div class="search-box">
        <form action="/">
          <van-search
            v-model.trim="carModels"
            shape="round"
            placeholder="搜索"
            @cancel="onCancel"
            @search="onSearch"
          />
          <!--   show-action-->
        </form>
      </div>
      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh" > -->
        <div
          class="find-car-item-recode"
          v-for="item in findCarRecordList"
          :key="item.orderId"
          @click="goDetail(item.id)"
        >
          <find-car-item :orderMsg="item"></find-car-item>
        </div>
        <div v-show="hasMore" class="moretext" @click="moreData">
          点击加载更多
        </div>
        <div v-show="finsh" class="moretext">没有更多了</div>
      <!-- </van-pull-refresh> -->
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import findCarItem from "../../components/common/findcaritem.vue";
import { getCarManagementCMyList } from "./api";
export default {
  components: {
    findCarItem,
  },
  data() {
    return {
      // header栏 => 标题
      title:"寻车记录",
      
      userOrder: [
        {
          orderId: "111",
          title: "奥迪A6L新能源 2020款 55 TFSI e quattro qqqqqqq",
          img: require("../../assets/image/4.png"),
          name: "刘余旭",
          phone: "13467890123",
          time: "2021/08/09 12:11:10",
          orderMessage: "待生成订单",
          orderNumber: 1,
        },
        {
          orderId: "222",
          title: "奥迪A6L新能源 2020款 55 TFSI e quattro",
          img: require("../../assets/image/4.png"),
          name: "刘余旭",
          phone: "13467890123",
          time: "2021/08/09 12:11:10",
          orderMessage: "待支付",
          orderNumber: 2,
        },
        {
          orderId: "333",
          title: "奥迪A6L新能源 2020款 55 TFSI e quattro",
          img: require("../../assets/image/4.png"),
          name: "刘余旭",
          phone: "13467890123",
          time: "2021/08/09 12:11:10",
          orderMessage: "已支付",
          orderNumber: 3,
        },
        {
          orderId: "444",
          title: "奥迪A6L新能源 2020款 55 TF",
          img: require("../../assets/image/4.png"),
          name: "刘余旭",
          phone: "13467890123",
          time: "2021/08/09 12:11:10",
          orderMessage: "已完结",
          orderNumber: 4,
        },
        {
          orderId: "555",
          title: "奥迪A6L新能源 2020款 55 TF",
          img: require("../../assets/image/4.png"),
          name: "刘余旭",
          phone: "13467890123",
          time: "2021/08/09 12:11:10",
          orderMessage: "已取消",
          orderNumber: 5,
        },
      ],
      list: [],
      refreshing: false,
      value: "",
      isActive: true,
      isCancel: false,
      // more: true,
      hasMore: true,
      finsh: false,
      // 寻车记录列表
      findCarRecordList: [],
      // 点击加载更多
      moreNum:1,
      // 搜索车型名
      carModels:'',
      numListLength:''
    };
  },
  methods: {
    // 获取寻车记录列表数据
    async initCarManagementCMyList(params) {
      const { data } = await getCarManagementCMyList(params);
      if(data.list.length === 0) {
        this.$toast({
          message: '没有更多了',
          position: 'top'
        })
      } else if (data.list.length < 20) {
        this.hasMore = false
        this.finsh = true
      } else  {
        this.hasMore = true
        this.false = false
      }
      this.findCarRecordList.push(...data.list)
    },
    // 点击获取更多数据
    moreData() {
      this.moreNum += 1
        let carModels = this.carModels !== '' ? this.carModels : null

      let params = {
        limit:20,
        page:this.moreNum,
        carModels,
        sidx:'create_time',
        order: 'desc'
      }
      this.initCarManagementCMyList(params)
      // 每次点击则多20条
    },
    // 顶部返回按钮
    goback() {
      this.$router.go(-1);
    },
    // 搜索框搜索事件
    onSearch() {
      this.carModels=this.carModels.replace(/^\s+|\s+$/g,'')
      console.log(this.carModels);
      this.findCarRecordList = []
      this.initCarManagementCMyList({limit:20,page:1,condition:this.carModels});
    },
    onCancel() {
      this.isCancel = false;
      this.isActive = true;
    },
    onClickRight() {
      this.isActive = false;
      this.isCancel = true;
    },
    goDetail(id) {
      const conf = require('../../utils/conf')
      const baseURL = conf.baseURL
      let token = sessionStorage.getItem('token')
      if (window.UniAppJSBridge) {
          uni.postMessage({
            data:{
              type:7,
              webUrl:`${baseURL}findcar/FindCarDetail?id=${id}&token=${token}`
              // webUrl:`https://hnbin.mynatapp.cc/capp/#/findcar/FindCarDetail?id=${id}&token=${token}`
            }
          })
          console.log('%c [ baseURL ]-192', 'font-size:13px; background:pink; color:#bf2c9f;', baseURL)
          console.log('%c [ id ]-198', 'font-size:13px; background:pink; color:#bf2c9f;',id )
          console.log('%c [ token ]-198', 'font-size:13px; background:pink; color:#bf2c9f;',token )
          console.log('%c [ url ]-201', 'font-size:13px; background:pink; color:#bf2c9f;', `${baseURL}findcar/FindCarDetail?id=${id}&token=${token}`)
        }
      /* this.$router.push({
        name: "FindCarDetail",
        query: {
          id
        },
      }); */
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        this.hasMore = true;

        if (this.userOrder.length >= 5) {
          this.finished = true;
        }
      }, 1000);
    },
    // 下啦加载
    onRefresh() {
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.hasMore = false;
      this.findCarRecordList= []
      this.initCarManagementCMyList({limit:20,page:1,sidx:'create_time',order: 'desc'});
    },
    // 获取路由链接上拼接的token值
    getTokenInUrl() {
      var url = window.location.href;
      if (url.indexOf("token") > 0) {
        let getTokenParams = window.location.href.split("token=")[1];
        getTokenParams=getTokenParams.split("&")[0];
        if (getTokenParams.length >= 32) {
          getTokenParams = getTokenParams.substr(0, 32);
          console.log('%c [ getTokenParams ]', 'font-size:13px; background:pink; color:#bf2c9f;', getTokenParams)
          sessionStorage.setItem("token", getTokenParams);
        }
      }
    }
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#F8F8F8");
  },
  created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
      // 修改页面标题
      document.title = "寻车记录"
    // 获取路由链接上拼接的token值
    this.getTokenInUrl()
    this.initCarManagementCMyList({limit:20,page:1,sidx:'create_time',order: 'desc'});
  },
};
</script>

<style scoped lang="less">
.find-car{
  margin-bottom: 20px;
}
.van-pull-refresh {
  height: 92vh;
  overflow: scroll;
}
.moretext {
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 12px;
  color: #999999;
  text-align: center;
  margin: 10px 0;
  letter-spacing: 1px;
}

.find-car-item-recode {
  padding: 0 16px;
  // margin-bottom: 20px;
  background-color: white;
}
.find-car-item {
  margin-top: 8px;
  // padding: 0 16px;
}
</style>
<style lang="less">
.van-nav-bar .van-icon {
  color: #000000 !important;
}
.van-nav-bar__title {
  font-size: 17px !important;
  font-family: PingFangSC-Semibold, PingFang SC !important;
  font-weight: 600 !important;
  color: #000000 !important;
}
.search_box{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
  width: 50px;
  height: 50px;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
}
</style>
